<template>
    <view>
        <uni-segmented-control :current="menuIndex" :values="menuItems" style-type="text" active-color="#007aff" @clickItem="onClickItem" />

        <view v-if="menuIndex === 0" v-for="(item, index) in serviceRecord" style="padding: 10px; margin: 5px; background-color: #ba8d76; border-radius: 10px">
            <view style="display: flex; margin-top: 5px" @click="() => goToDetailPage(item)">
                <view style="margin-left: 10px">
                    <view style="display: flex; justify-content: space-between">
                        <view>{{ item.ciName }}</view>
                    </view>
                    <view style="font-size: 14px; color: #fff; margin-top: 3px">客户电话：{{ item.ciPhon }}</view>
                    <view style="font-size: 14px; color: #fff; margin-top: 3px">接待员工：{{ item.crRsna }}</view>
                    <view style="font-size: 14px; color: #fff; margin-top: 3px">创建日期: {{ UTCTimeToLocal(item.crCrti) }}</view>
                    <view v-if="item.crEnti" style="font-size: 14px; color: #fff; margin-top: 3px">结束日期: {{ UTCTimeToLocal(item.crEnti) }}</view>
                </view>
            </view>
        </view>

        <view v-if="menuIndex === 1" v-for="(item, index) in serviceRecord" style="padding: 10px; margin: 5px; background-color: #ba8d76; border-radius: 10px">
            <view style="display: flex; margin-top: 5px" @click="() => goToDetailPage(item)">
                <view style="margin-left: 10px">
                    <view style="display: flex; justify-content: space-between">
                        <view>{{ item.ciName }}</view>
                    </view>
                    <view style="font-size: 14px; color: #fff; margin-top: 3px">客户电话：{{ item.ciPhon }}</view>
                    <view style="font-size: 14px; color: #fff; margin-top: 3px">接待员工：{{ item.crRsna }}</view>
                    <view style="font-size: 14px; color: #fff; margin-top: 3px">创建日期: {{ UTCTimeToLocal(item.crCrti) }}</view>
                    <view v-if="item.crEnti" style="font-size: 14px; color: #fff; margin-top: 3px">结束日期: {{ UTCTimeToLocal(item.crEnti) }}</view>
                </view>
            </view>
        </view>
        <u-empty v-if="serviceRecord.length === 0" text="暂无服务中的客户信息"> </u-empty>
    </view>
</template>

<script>
import { getCustomerServiceItemList } from "../../utils/api";
import { mapGetters } from "vuex";

export default {
    data() {
        return {
            serviceRecord: {},
            menuItems: ["服务中", "已结束"],
            menuIndex: 0,
            selectItem: "",
            ciUuid: "",
            quant: 0,
        };
    },

    async onLoad(params) {
        console.log(params);
        let resList = await getCustomerServiceItemList({ crRsid: this.staffInfo.orUuid, crStat: "待确认" });
        if (resList) this.serviceRecord = resList || [];
    },

    computed: {
        ...mapGetters({
            staffInfo: "personInfo/staffInfo",
        }),
    },

    methods: {
        goToDetailPage(item) {
            uni.navigateTo({
                url: `customer_current_service_item?crUuid=${item.crUuid}`,
            });
        },

        async onClickItem(e) {
            if (this.menuIndex !== e.currentIndex) {
                this.menuIndex = e.currentIndex;
                if (e.currentIndex == 0) {
                    let resList = await getCustomerServiceItemList({ crRsid: this.staffInfo.orUuid, crStat: "待确认" });
                    if (resList) this.serviceRecord = resList || [];
                }
                if (e.currentIndex == 1) {
                    let resList = await getCustomerServiceItemList({ crRsid: this.staffInfo.orUuid, crStat: "已确认" });
                    if (resList) this.serviceRecord = resList || [];
                }
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.divider {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 15px auto;

    .line {
        flex: 1;
        margin: 0;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        width: 100%;
        transform: scaleY(0.5);
    }

    .text {
        text-align: center;
        margin: 0 15px;
    }
}
</style>
